<template>
  <QuerySearch
      :options="searchOptions"
      show-create
      show-destroy
      @onConfirm="onSearch"></QuerySearch>
  <el-pagination
      small
      background
      hide-on-single-page
      layout="total, prev, pager, next"
      :total="1000" class="p_b5 f_r">
  </el-pagination>
  <el-table
      :data="lists.data"
      max-height="100%"
      border
      style="width: 100%">
    <el-table-column
        prop="date"
        label="日期"
        width="180">
    </el-table-column>
    <el-table-column
        prop="name"
        label="姓名"
        width="180">
    </el-table-column>
    <el-table-column
        prop="address"
        label="地址">
    </el-table-column>
  </el-table>
  <el-pagination
      small
      background
      hide-on-single-page
      layout="total, prev, pager, next"
      :total="1000" class="p_t5 f_r">
  </el-pagination>
</template>

<script lang="ts">
import {defineComponent} from 'vue'
import QuerySearch from "@/components/listSearch/QuerySearch.vue";
import QuerySearchHelper from "@/components/listSearch/QuerySearchHelper";

export default defineComponent({
  name: "Lists",
  components: {
    QuerySearch
  },
  methods: {
    onSearch(data: any) {
      console.log(data)
    }
  },
  data() {
    return {
      searchOptions: [
        QuerySearchHelper.input('name', '酒店名称', '文化酒店', '请输入酒店名称'),
        // select的使用
        QuerySearchHelper.select('select', [{
          value: 1,
          label: '黄金糕'
        }, {
          value: 2,
          label: '双皮奶'
        }], '蛋糕类型', 2),
        // radio的使用
        QuerySearchHelper.radio('radio', [{
          value: 1,
          label: '黄金糕'
        }, {
          value: 2,
          label: '双皮奶'
        }], '蛋糕类型', 1),
        // checkbox的使用
        QuerySearchHelper.checkbox('checkbox', [{
          value: 1,
          label: '黄金糕'
        }, {
          value: 2,
          label: '双皮奶'
        }], '蛋糕类型'),
        QuerySearchHelper.dateRange('dateRange'),
        QuerySearchHelper.datetimeRange('datetimeRange'),
        QuerySearchHelper.timeRange('timeRange'),
      ],
      lists: {
        data: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    }
  }
})
</script>

<style lang="scss" scoped>

</style>
